<script setup>
import { watch } from "vue"
import { useRouter } from "vue-router"
const User = window.User

const theme = ref(localStorage.getItem('theme') ?? 'light');
const isTheme = ref()
const router = useRouter()

watch(isTheme, (newValue) => {
  theme.value = newValue ? "dark" : "light"
  document.querySelector('html').className = newValue ? "dark" : ""
})

watch(theme, (newValue) => {
  // 获取主题，替换主题
  if (newValue !== undefined) {
    let cssHref = document.querySelector("head #theme").getAttributeNode('href')
    cssHref.value = cssHref.value.split("/").slice(0, -1).join("/") + "/" + newValue + ".css"
    localStorage.setItem("theme", newValue)// 存入
  }
  isTheme.value = !(newValue == "light")
}, { immediate: true })

const logout = User.userLogout
</script>

<template>
  <div class="dinglan">
    <div class="center">
      <div class="left" @click.stop="router.push('/')">
        <div class="item logo hoverBottom">
          <img src="https://bit-1310383539.cos.ap-chengdu.myqcloud.com/web-files/favicon.svg" />MyLog
        </div>
      </div>
      <div class="middle">
        <div class="item hoverBottom" @click="router.push('/note')">记录</div>
        <div class="item hoverBottom" @click="router.push('/relation')">关系</div>
        <div class="item hoverBottom">友链
          <div class="xlmenu">
            <div class="hoverBottom">
              <a href="https://www.loveyourself.cafe/" target="_black">一沫清茶</a>
            </div>
            <div class="hoverBottom">
              <a href="https://hcyx233.github.io/" target="_black">建哥のBLOG</a>
            </div>
          </div>
        </div>
        <div class="item hoverBottom">传送
          <div class="xlmenu">
            <div class="hoverBottom">
              <a href="https://www.sicau.edu.cn/" target="_black">川农官网</a>
            </div>
            <div class="hoverBottom">
              <a href="http://jiaowu.sicau.edu.cn/" target="_black">教务网</a>
            </div>
            <div class="hoverBottom">
              <a href="https://passport.zhihuishu.com/login" target="_black">智慧树</a>
            </div>
          </div>
        </div>
        <div class="item hoverBottom" @click="router.push('/setting')">设置</div>
      </div>
      <div class="right">
        <div class="item hoverBottom user">
          <span class="t" v-if="User.name">{{ User.name }}</span>
          <span class="t" v-else @click="router.push('/login')">未登录</span>
          <div class="xlmenu" v-if="User.name">
            <div class="hoverBottom mypage" @click="router.push('/user')">我的主页</div>
            <div class="hoverBottom mypage" @click="logout">退出登录</div>
          </div>
        </div>
        <el-switch v-model="isTheme" inline-prompt
          style="--el-switch-on-color: var(--btn-color); --el-switch-off-color: var(--btn-color)" active-text="暗"
          inactive-text="亮" />
      </div>
    </div>
  </div>
  <div class="top-div"> <!-- 占位 --> </div>
</template>

<style scoped lang="less">
.dinglan {
  display: block;
  background-color: var(--model-back-color);
  border-bottom: 1px solid var(--model-border-color);
  box-shadow: var(--model-shadow);
  backdrop-filter: blur(5px);
  width: 100%;

  position: fixed;
  top: 0px;
  z-index: 50;

  // 中间的框住3个
  >.center {
    width: 65%;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    transition: 0.5s;
    font-weight: 600;

    .item {
      position: relative;
      display: inline-block;
      /* 通过行高撑大父元素 */
      line-height: 50px;
      padding: 0px 16px;
      // border: 1px solid red;

      /* 下拉菜单 */
      .xlmenu {
        display: none;
        position: absolute;
        left: 0px;
        line-height: 40px;
        font-weight: 500;
        overflow: hidden;

        white-space: nowrap;
        text-align: center;
        border-radius: 0px 0px 10px 10px;
        background-color: var(--model-back-color);
        box-shadow: 1px 1px 10px var(--shadow-color);

        >div {
          padding: 0px 10px;
        }
      }

      &:hover .xlmenu {
        display: block;
      }
    }

    >.left {
      min-width: 120px;

      .logo {
        font-size: 23px;
        position: relative;

        img {
          position: absolute;
          left: 0px;
          top: 20px;
          height: 60px;
          opacity: 0.6;
        }
      }
    }

    >.middle {
      /* 如果中间的选项变多这个也要改 */
      min-width: 320px;
    }

    .right {
      padding-right: 10px;
      min-width: 130px;
    }
  }

}

// 顶部占位
.top-div {
  margin-bottom: 80px;
}

@media screen and (max-width: 1300px) {
  .dinglan>.center {
    width: 95%;
  }
}

@media screen and (max-width: 600px) {

  /* 顶栏 */
  .dinglan>.center {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;

    >div {
      flex: 1;
    }

    >.left {
      order: 1;
    }

    >.right {
      order: 2;
      text-align: right;
    }

    >.middle {
      order: 3;
      text-align: center;
    }

    .item {
      line-height: 40px;
    }

  }

  .top-div {
    margin-bottom: 100px;
  }
}
</style>